<template>
  <!-- v-loading="true" -->
  <div>
    <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" />
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading">


      <template #headImage="{ row }">
        <el-image v-if='row.headImage' style="width: 100px; height: 100px;z-index: 9999999;"
          :src="getPicImg(row.headImage)" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
          :preview-src-list="[getPicImg(row.headImage)]" :preview-teleported='true' :initial-index="4" fit="cover" />
      </template>


      <template #phone="{ row }">
        <span v-if="row.phone">
          {{ formatPhone(row.phone, ' ') }}
        </span>
      </template>


      <template #operation="{ row }">
        <el-button type="primary" link @click="openDialogFn(row)">更多信息</el-button>
        <el-popconfirm title="确认要删除吗?" @confirm="delData(row.userId)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>

        <el-popconfirm :title="`确认要${row.blackw == '1' ? '恢复' : '拉黑'}吗?`" @confirm="laHEeiFn(row)">
          <template #reference>
            <el-button :type="row.blackw == '0' ? 'danger' : 'success'" link>{{ row.blackw == '1' ? '恢复' : '拉黑'
              }}</el-button>
          </template>
        </el-popconfirm>

      </template>



    </pageTable>

    <Dialog width="50%" top="5vh" ref="DialogRef" title="详细信息" @submit="submitForm(ruleFormRef)"
      @onclose="resetForm(ruleFormRef)" :showClose="false">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>用户基本信息</span>
          </div>
        </template>
        <el-row :gutter="20">




          <el-col :span="12" class="mb-[10px] ">
            <el-row>
              <el-col :span="6" style="color:#6B7988" class="whitespace-nowrap">用户邮箱:</el-col>
              <el-col :span="18" class="whitespace-nowrap">{{ userMessage.email }}</el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="mb-[10px]">
            <el-row>
              <el-col class="whitespace-nowrap" :span="6" style="color:#6B7988">真实姓名:</el-col>
              <el-col class="whitespace-nowrap" :span="18">{{ userMessage.name }}</el-col>
            </el-row>
          </el-col>


          <el-col :span="12" class="mb-[10px]">
            <el-row>
              <el-col class="whitespace-nowrap" :span="6" style="color:#6B7988">手机号码:</el-col>
              <el-col class="whitespace-nowrap" v-if="userMessage.phone" :span="18">{{ formatPhone(userMessage.phone)
                }}</el-col>
              <el-col class="whitespace-nowrap" v-else :span="18">--</el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="mb-[10px]">
            <el-row>
              <el-col class="whitespace-nowrap" :span="6" style="color:#6B7988">公司名称:</el-col>
              <el-col class="whitespace-nowrap" :span="18">{{ userMessage.enterprise }}</el-col>
            </el-row>
          </el-col>



          <el-col :span="12" class="mb-[10px]">
            <el-row>
              <el-col class="whitespace-nowrap" :span="6" style="color:#6B7988">职业:</el-col>
              <el-col class="whitespace-nowrap" :span="18">{{ userMessage.position }}</el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="mb-[10px]">
            <el-row>
              <el-col class="whitespace-nowrap" :span="6" style="color:#6B7988">通讯地址:</el-col>
              <el-col class="whitespace-nowrap" :span="18">{{ userMessage.address }}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>


      <el-card class="box-card mt-[50px]">
        <template #header>
          <div class="card-header">
            <span>用户收货地址</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8" class="mb-[10px]" v-for="(item, index) in userMessage.userAddresses" :key="index">
            <el-card shadow="never" class="relative">
              <div class="absolute right-0 top-0 " style="bacground: red;" v-if="item.moren == 1">
                <el-tag class="" type="success">默认地址</el-tag>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">收件人:</div>
                <div class="flex-1">{{ item.name }}</div>
              </div>
              <div class="flex  mb-[10px]">
                <div class="w-[94px]">手机号:</div>
                <div class="flex-1">{{ formatPhone(item.phone, ' ') }}</div>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">所在地区:</div>
                <div class="flex-1">{{ item.distinguish }}</div>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">详细地址:</div>
                <div class="flex-1">{{ item.address }}</div>
              </div>


            </el-card>
          </el-col>

        </el-row>
      </el-card>




      <el-card class="box-card mt-[50px]">
        <template #header>
          <div class="card-header">
            <span>用户发票信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8" class="mb-[10px]" v-for="(item, index) in userMessage.fapiaos" :key="index">
            <el-card shadow="never" class="relative">
              <div v-if="item.moren == 1" class="absolute right-0 top-0 " style="bacground: red;">
                <el-tag class="" type="success">默认发票</el-tag>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">发票抬头:</div>
                <div class="flex-1">{{ item.fphead }}</div>
              </div>
              <div class="flex  mb-[10px]">
                <div class="w-[94px]">纳税人识别号:</div>
                <div class="flex-1">{{ item.fpno }}</div>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">单位地址:</div>
                <div class="flex-1">{{ item.dwaddress }}</div>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">单位电话:</div>
                <div class="flex-1">{{ item.dwphone }}</div>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">开户银行:</div>
                <div class="flex-1">{{ item.khbank }}</div>
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[94px]">银行账户:</div>
                <div class="flex-1">{{ item.bankno }}</div>
              </div>


            </el-card>
          </el-col>

        </el-row>
      </el-card>

    </Dialog>



  </div>
</template>

<script setup lang="ts">
import pageTable from "@/components/base-ui/page-table";
import pageSearch from "@/components/base-ui/page-search";
import PicUpload from "@/components/base-ui/editor/picUpload.vue";
import { message } from "@/utils/message";
import Dialog from "@/components/base-ui/dialog";
import { reactive, ref, computed } from 'vue'
import type { FormInstance, FormRules, UploadUserFile, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { clone } from "@pureadmin/utils";
import { randomNumber } from '@/utils/xwCommon'
import { tableInit } from "./config/table.config";
import { searchFormConfig } from "./config/search.config";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { userselpage, userperinfo, useruserblackw, userdelinfo, useruseroutblackw } from '@/api/user'
import { getPicImg, geturlneeddl, uploadUrl } from '@/api/upload'

const {
  exportExcel,
  tableData,
  getData,
  params,
  loading,
  sizeChange,
  currentChange,
  delData,
  searchSubmit,
  DialogRef,
  openDialog,
  formatPhone
} = usepageTable({
  tableInit,
  getRes: userselpage,
  delRes: userdelinfo,
})

getData()







const userMessage = ref({})

const openDialogFn = (row) => {
  userperinfo(row.userId).then(res => {
    userMessage.value = res.result
    openDialog()
  })
}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {

      console.log(ruleForm)

    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()



}


const laHEeiFn = (row) => {
  let fn = row.blackw == 1 ? useruseroutblackw : useruserblackw
  fn(row.userId).then(res => {
    message("修改成功", {
      type: "success"
    });
    getData()
  })
}


</script>

<style scoped></style>
